<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible"
          content="ie=edge" />
    <title>grid</title>
    <style>
      table {
        max-width: 800px;
        border-spacing: 2px;
        border-collapse: initial;
      }

      table td {
        padding: 10px;
        min-width: 50px;
        box-sizing: border-box;
      }

    </style>
  </head>

  <body>
    <div id="app"></div>
    <h2>传统表格布局之table标签排版总结</h2>
    <!-- <h3>1. 基本表格（双线表格）</h3>
    table标签内添加border属性：border="1"，value值不带单位
    <table border="1"
           width="100%">
      <tbody>
        <tr>
          <td>aa</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>bb</td>
          <td>2</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <h3>2. 无边框表格</h3>
    <table width="100%">
      <tbody>
        <tr>
          <td>aa</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>bb</td>
          <td>2</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <h3>3. 单线表格</h3>
    <table border="1"
           width="100%"
           style="border-collapse: collapse;">
      <thead></thead>
      <tbody>
        <tr>
          <td>aa</td>
          <td>1</td>
          <td>1</td>
        </tr>
        <tr>
          <td>bb</td>
          <td>2</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <h3>4. 合并多列表格</h3>
    <table border="1"
           width="100%">
      <tbody>
        <tr>
          <td rowspan="2"
              width="100px">rowspan:<br />行合并数目</td>
          <td>aa</td>
          <td>1</td>
        </tr>
        <tr>
          <td>bb</td>
          <td>2</td>
        </tr>
        <tr>
          <td>cc</td>
          <td>3</td>
          <td>3</td>
        </tr>
      </tbody>
    </table>
    <br />
    <table border="1"
           width="100%">
      <tbody>
        <tr>
          <td>aa</td>
          <td colspan="2">colspan: 列合并数目(特定长度的单元格，不会删除后面的单元格）</td>
          <td>1</td>
        </tr>
        <tr>
          <td>bb</td>
          <td width="200px">2</td>
          <td width="200px">2</td>
          <td>2</td>
        </tr>
      </tbody>
    </table>
    <h3>5. 涵盖所有table标签表格</h3>
    table标签总结
    <table border="1"
           width="100%">
      <caption>表格标题：caption标签<br /><br /></caption>
      <thead>
        <th>表头thead</th>
        <th>th1</th>
        <th>th2</th>
      </thead>
      <tbody>
        <tr>
          <td style="width: 33%">表体1：tbody</td>
          <td style="width: 33%">注：tbody可以有多个</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
      <tbody>
        <tr>
          <td>表体2：tbody</td>
          <td>注：tbody如果不写，浏览器里也会自动生成</td>
          <td>1</td>
        </tr>
        <tr>
          <td>2</td>
          <td>3</td>
          <td>4</td>
        </tr>
      </tbody>
      <tfoot>
        <tr>
          <td>注脚:tfoot</td>
          <td>-</td>
          <td>-</td>
        </tr>
      </tfoot>
    </table>
    <h3>6. 表格实例</h3>
    <table border="1"
           width="100%">
      <thead></thead>
      <tbody>
        <tr>
          <td>公司名称</td>
          <td colspan="4">xxx有限公司</td>
        </tr>
        <tr>
          <td>证件类型</td>
          <td colspan="4">身份证</td>
        </tr>
        <tr>
          <td>身份证</td>
          <td colspan="4">10011***123</td>
        </tr>
        <tr>
          <td rowspan="5">信息</td>
          <td class="label">catA</td>
          <td colspan="3">br：<br />br：<br /></td>
        </tr>
        <tr>
          <td>catB</td>
          <td colspan="3"></td>
        </tr>
        <tr>
          <td>catC</td>
          <td colspan="3"></td>
        </tr>
        <tr>
          <td>catD1</td>
          <td></td>
          <td class="label">catD2</td>
          <td></td>
        </tr>
        <tr>
          <td>catD3</td>
          <td></td>
          <td class="label">catD4</td>
          <td></td>
        </tr>
      </tbody>
    </table> -->

    <style>
      /* 表格布局之inline-block */
      .inline-block-box {
        font-size: 0;
        border: 1px solid;
      }

      .inline-block-box .left {
        width: 200px;
        text-align: center;
      }

      .inline-block-box .hr {
        height: 1px;
        background-color: currentColor;
      }

      .inline-block-box .right {
        width: calc(100% - 200px);
        border-left: 1px solid;
      }

      .inline-block-box .right.half {
        width: calc(50% - 200px);
      }

      .inline-block-box .left,
      .inline-block-box .right {
        display: inline-block;
        padding: 10px 0;
        font-size: 16px;
        box-sizing: border-box;
        line-height: 28px;
        vertical-align: middle;
      }

      .inline-block-box .font0 {
        font-size: 0;
      }

      .inline-block-box .padding0 {
        padding: 0;
      }

      .inline-block-box .left-border {
        border-left: 1px solid;
      }

      .purple {
        background-color: darkmagenta;
      }

    </style>
    <h2>表格布局之inline-block：多用于垂直居中对齐</h2>
    <section class="inline-block-box font0">
      <div class="left">公司名称</div>
      <div class="right">&nbsp;</div>
      <div class="hr"></div>
      <div class="left">证件类型</div>
      <div class="right">&nbsp;</div>
      <div class="hr"></div>
      <div class="left">身份证</div>
      <div class="right">&nbsp;</div>
      <div class="hr"></div>
      <div class="font0">
        <div class="left purple">信息</div>
        <div class="right font0 padding0">
          <div class="left purple">catA</div>
          <div class="right">
            文字较多时：br<br />回行不影响布局：br<br />回行不影响catA自适应：br<br />
          </div>
          <div class="hr"></div>
          <div class="left">catB</div>
          <div class="right">&nbsp;</div>
          <div class="hr"></div>
          <div class="left">catC</div>
          <div class="right">&nbsp;</div>
          <div class="hr"></div>
          <div class="left">catD1</div>
          <div class="right half">&nbsp;</div>
          <div class="left left-border">catD2</div>
          <div class="right half">&nbsp;</div>
          <div class="hr"></div>
          <div class="left">catD3</div>
          <div class="right half">&nbsp;</div>
          <div class="left left-border">catD4</div>
          <div class="right half">&nbsp;</div>
        </div>
      </div>
    </section>

    <style>
      /* 表格布局之float-layout */
      .float-layout-box {
        border-top: 1px solid;
        border-right: 1px solid;
      }

      .float-layout-box div {
        box-sizing: border-box;
        float: left;
        padding: 10px 0;
        border-left: 1px solid;
        border-bottom: 1px solid;
        min-height: 42px;
      }

      .clearfix::after {
        content: " ";
        clear: both;
        display: block;
        width: 0;
        height: 0;
        visibility: hidden;
      }

      .float-layout-box .padding0 {
        padding: 0;
      }

      .float-layout-box .label {
        width: 200px;
        text-align: center;
      }

      .float-layout-box .content {
        width: calc(100% - 200px);
      }

      .float-layout-box .half {
        width: calc(50% - 200px);
      }

      .float-layout-box .border-left-0 {
        border-left-width: 0;
      }

      .float-layout-box .border-bottom-0 {
        border-bottom-width: 0;
      }

    </style>
    <h2>CSS3盒模型display:box详解</h2>
    <h2>表格布局之float-layout：多用于流式布局</h2>
    <section class="float-layout-box clearfix">
      <div class="label">公司名称</div>
      <div class="content">&nbsp;</div>
      <div class="label">证件类型</div>
      <div class="content">&nbsp;</div>
      <div class="label">身份证</div>
      <div class="content">&nbsp;</div>
      <div class="clearfix padding0">
        <div class="label border-bottom-0"
             style="margin-left: -1px;line-height: 188px">
          信息
        </div>
        <div class="content padding0 border-left-0 border-bottom-0">
          <div class="label">catA</div>
          <div class="content">&nbsp;</div>
          <div class="label">catB</div>
          <div class="content">&nbsp;</div>
          <div class="label">catC</div>
          <div class="content">&nbsp;</div>

          <div class="label">catD1</div>
          <div class="content half">&nbsp;</div>
          <div class="label">catD2</div>
          <div class="content half">&nbsp;</div>
          <div class="label border-bottom-0">catD3</div>
          <div class="content half border-bottom-0">&nbsp;</div>
          <div class="label border-bottom-0">catD4</div>
          <div class="content half border-bottom-0">&nbsp;</div>
        </div>
      </div>
    </section>

    <ol>
      <li>
        在父级元素上设置display:box，可使其子代排列在同一水平上，类似display:inline-block;
      </li>
      <li>1.-webkit-box-flex:number; 占父级元素宽度的number份</li>
      <li>
        2.-webkit-box-orient:horizontal/vertical;
        在父级设置，控制子代排列方向（水平或竖直）。
      </li>
      <li>
        3.-webkit-box-direction:normal/reverse; 在父级设置，控制子代的排列顺序。
      </li>
      <li>
        4.-webkit-box-align:start/end/center/stretch;
        在父级设置，控制子代的垂直对齐方式。
      </li>
      <li>
        5.-webkit-box-pack:start/end/center;
        在父级设置，控制子代的水平对齐方式。
      </li>
    </ol>
    <style>
      .display-box-box div.box-box {
        display: -webkit-box;
      }

      .display-box-box div {
        box-sizing: border-box;
      }

      .display-box-box .label {
        width: 200px;
        border: 1px solid;
        border-right-color: transparent;
        border-bottom-color: transparent;
      }

      .display-box-box .content {
        width: calc(100% - 200px);
        border: 1px solid;
        border-bottom-color: transparent;
      }

      .float-box-box .half {
        width: calc(50% - 200px);
      }

    </style>
    <section class="display-box-box">
      <div class="box-box">
        <div class="label">公司名称</div>
        <div class="content">&nbsp;</div>
      </div>
      <div class="box-box">
          <div class="label">证件类型</div>
          <div class="content">&nbsp;</div>
      </div>
      <div class="box-box">
        <div class="label">身份证</div>
        <div class="content">&nbsp;</div>
      </div>
      <div class="box-box">
          <div class="label border-bottom-0"
               style="margin-left: -1px">
            信息
          </div>
          <div class="content" style="border-width: 0">
            <div class="box-box">
              <div class="label">catA</div>
              <div class="content">&nbsp;</div>
            </div>
            <div class="box-box">
              <div class="label">catB</div>
              <div class="content">&nbsp;</div>
            </div>
            <div class="box-box">
              <div class="label">catC</div>
              <div class="content">&nbsp;</div>
            </div>
            <div class="box-box">
              <div class="label">catD1</div>
              <div class="content">&nbsp;</div>
              <div class="label">catD2</div>
              <div class="content">&nbsp;</div>
            </div>
            <div class="box-box">
              <div class="label">catD3</div>
              <div class="content">&nbsp;</div>
              <div class="label">catD4</div>
              <div class="content">&nbsp;</div>
            </div>
          </div>
      </div>
      </div>
    </section>
    <br />
    <br />
    <br />
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.js"></script>
    <script>
      /**
        // 实例化 vue对象
        new Vue({
            el:"vue-app",
            data:{
                name:"hello vue"
            },
            methods:{
                updateNmae:function(){
                    this,name = '修改后的hello vue'
                }
            }
        })
        // import App from './App.vue'
        let vm = new Vue({
          render: h => h(App)
        }).$mount("#app");
        console.log(vm)
      */
      let vm = new Vue({
        el: '#app',
        data: {
          a: 1
        },
        template: `
          <div>
            <h2>father template</h2>
            <component-a></component-a>
          </div>
        `,
        components: {
          'component-a': {
            data: function () {
              return {
                msg: 123456789
              }
            },
            template: '<div>{{msg}}</div>'
          }
        },
        mounted() {
          console.log(this)
        }
      })

    </script>
  </body>

</html>
